<template>
  <div class="yingmooHerader">
    <header class="header">
      <p>
        <router-link tag="span" to="/ymIndex"><img src="../assets/ym-member/home.png" />鹰目网首页</router-link>
        <span class="register">
        	<span v-if="user.contentName != null">{{user.contentName}}</span>
        	<span v-if="user.contentUser != null">{{user.contentUser}}</span>
          <img src="../assets/ym-header/arrows.png" />
        </span>
        <span class="out">退出</span>
        <span class="member">会员中心</span>
	    	<span class="serve"><router-link tag="span" to="/ymMemberneedlist">我的需求</router-link><img src="../assets/ym-header/arrows.png" /></span>
	    	<span class="serve"><router-link tag="span" to="/ymMemberorder">我的订单</router-link><img src="../assets/ym-header/arrows.png" /></span>
	    	<span class="serve"><router-link tag="span" to="/ymAttentionmedia">关注中心</router-link><img src="../assets/ym-header/arrows.png" /></span>
	    	<span class="serve"><router-link tag="span" v-if="user.shop != 0" to="/ymMemberstore">店铺管理</router-link><img src="../assets/ym-header/arrows.png" /></span>
        <span class="tel">客服热线</span>
        <span class="num">
			    <img src="../assets/ym-header/phone.png" class="tel_img" />400 650 7893</span>
      </p>
    </header>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        user: {},
        flag: false
      }
    },
    mounted() {
      this.getUser();
    },
    methods: {
      getUser: function() {
        var data = localStorage.getItem("user");
        if (data != null) {
          this.user = JSON.parse(localStorage.getItem("user"));
          this.flag = true;
        } else {
          this.flag = false;
        }
      },
      confirmExit: function() {
        if (confirm("您确认要退出吗？")) {
          localStorage.clear();
          this.user = {};
          this.flag = false;
        }
      }
    }
  }

</script>

<style scoped lang="less">
  .member_link {
    cursor: pointer;
  }

  .header {
    width: 100%;
    height: 45px;
    background-color: #e6e6e6;
  }

  .header p {
    width: 1200px;
    margin: 0 auto;
    line-height: 45px;
    font-size: 12px;
    color: #666666;
    .out {
      color: #f29600;
      margin-left: 8px;
    }
    .register {
      margin-left: 100px;
    }

    .login {
      color: #f29600;
      margin-left: 43px;
    }

    .member {
      margin-left: 270px;
      margin-right: 95px;
      padding: 0 5px 1px 5px;
      width: 99px;
      height: 22px;
      background-color: #f29600;
      color: white;
    }

    .member img,
    .mean img,
    .serve img {
      padding-left: 5px;
    }

    .member,
    .mean,
    .serve {
      margin-right: 5px;
    }

    .tel {
      margin-left: 70px;
    }

    .tel_img {
      padding-left: 5px;
      padding-right: 5px;
    }

    .num {
      font-weight: bold;
      color: #f29600;
    }
    .serve {
      span {
        margin-left: 5px;
      }
      img {
        margin-right: 10px;
      }
      cursor: pointer;
    }
    span{
      cursor: pointer;
    }
  }

</style>
